<template>
  <div class="login-body">
    <div class="login-kuang">
      <h2>电商后台管理平台</h2>
      <el-form  :model="loginForm" :rules="rules" ref="loginFromRef" >
          <el-form-item prop='username'>
      <el-input class="login_input" prefix-icon="el-icon-user"   v-model="loginForm.username" placeholder="请输入用户名" ></el-input>
          </el-form-item>
          <el-form-item prop='password'>
      <el-input class="login_input"  prefix-icon="el-icon-unlock" show-password v-model="loginForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
      </el-form>
      <div class="login-btn">
          <el-button type="primary" @click="loginBtn">登录</el-button>
          <el-button type="info">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {LoginApi} from '@/http/api'
export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules:{
        username:[
          { required:true , message:"请输入用户名", trigger: 'blur'},
          { min: 5, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        password:[
          { required:true , message:"请输入密码", trigger: 'blur'},
          {min: 5, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods:{
     loginBtn(){
       this.$refs.loginFromRef.validate(valid=>{
         console.log('登录是否成功',valid)
         if(!valid) return false
         console.log("开始调用接口");
        LoginApi(this.loginForm).then(res=>{
          console.log('登陆成功的结果', res);
        })
       })
     }
  }
}
</script>
  <style lang="scss" scoped>
.login-body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #3b4b6b;
  .login-kuang{
    padding: 20px;
    width: 500px;
    height: 350px;
    background-color: #fff;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 20px ;
  }
  .login-btn{
    display: flex;
    justify-content: flex-end;
    margin-right: 30px;
  }
}
</style>
